<template>
    <div class="goods clearfix">
        <!-- 小图两列 -->
        <div class="goods-list-2" v-if="floors.listStyle == 'style1'" :style="{ background: floors.background }">
            <ul class="goods-list-2-ul" ref="goodsLi">
                <!-- 自定义 -->
                <template v-if="floors.prodSource.type == 'diy'">
                    <template v-if="shopData && shopData.length">
                        <li
                            class="goods-li"
                            :class="floors.prodStyle == 'style1' ? 'radius' : ''"
                            v-for="(prodItem, CountIndex) in shopData"
                            :key="CountIndex"
                            @click="goingGoods(prodItem)"
                        >
                            <div class="goods-li-item">
                                <div class="item-img">
                                    <legend-image :pic="prodItem.pic" :isJD="prodItem.prodSource == 'JD'" className="object-contain" :options="{w:'174',h:'170'}" />
                                </div>
                                <div class="goods-horn" v-if="floors.displayContent.badgeStyle">
                                    <template v-if="floors.displayContent.badge == 'new'">
                                        <img src="../../assets/images/horn1.png" alt="" />
                                    </template>
                                    <template v-if="floors.displayContent.badge == 'hot'">
                                        <img src="../../assets/images/horn2.png" alt="" />
                                    </template>
                                    <template v-if="floors.displayContent.badge == 'custom'">
                                        <img
                                            :src="
                                                floors.displayContent.url
                                                    ? $imgUrlHead + floors.displayContent.url
                                                    : require('../../assets/images/detailDefault.jpg')
                                            "
                                            alt=""
                                        />
                                    </template>
                                </div>
																<goods-img-mask v-if="prodItem.status === -1 || prodItem.status === 0 || prodItem.invalidStatus === 10" :info="prodItem"></goods-img-mask>
                            </div>

                            <div
                                class="item-content _paddingTB"
                                v-if="floors.displayContent"
                                :class="[
                                    !floors.displayContent.spuName && !floors.displayContent.skuName && !floors.displayContent.price ? 'on' : '',
                                    floors.displayContent.price == false ? 'on1' : ''
                                ]"
                            >
                                <span class="goods-name" v-if="floors.displayContent.name">{{ prodItem.name }}</span>
                                <!-- <span
                  class="goods-spec-name"
                  v-if="floors.displayContent.skuName"
                  >{{ prodItem.skuName }}</span -->
                                >
                                <div class="pro-price" v-if="floors.displayContent.price" :style="{ color: themes.color }">
                                    <span class="price">
                                        ￥
                                        <em class="now" :style="{ color: themes.color }">{{ Money(prodItem.price)[0] }}</em>
                                        .{{ Money(prodItem.price)[1] }}
                                    </span>
                                </div>
                                <div class="goods-cat-image" v-if="floors.displayContent.cartStyle" :style="{ background: themes.color }">
                                    <img src="../../assets/images/goodCar.png" alt="" />
                                </div>
                            </div>
                        </li>
                    </template>

                    <template v-else>
                        <li
                            class="goods-li"
                            :class="floors.prodStyle == 'style1' ? 'radius' : ''"
                            v-for="(prodItem, CountIndex) in floors.prodCount"
                            :key="CountIndex"
                        >
                            <div class="goods-li-item">
                                <div class="item-img"><img src="../../assets/images/moren.png" alt="" /></div>
                                <div class="goods-horn" v-if="floors.displayContent.badgeStyle">
                                    <template v-if="floors.displayContent.badge == 'new'">
                                        <img src="../../assets/images/horn1.png" alt="" />
                                    </template>
                                    <template v-if="floors.displayContent.badge == 'hot'">
                                        <img src="../../assets/images/horn2.png" alt="" />
                                    </template>
                                    <template v-if="floors.displayContent.badge == 'custom'">
                                        <img
                                            :src="
                                                floors.displayContent.url
                                                    ? $imgUrlHead + floors.displayContent.url
                                                    : require('../../assets/images/detailDefault.jpg')
                                            "
                                            alt=""
                                        />
                                    </template>
                                </div>
                            </div>
                            <div
                                class="item-content _paddingTB"
                                v-if="floors.displayContent"
                                :class="[
                                    !floors.displayContent.spuName && !floors.displayContent.skuName && !floors.displayContent.price ? 'on' : '',
                                    floors.displayContent.price == false ? 'on1' : ''
                                ]"
                            >
                                <span class="goods-name" v-if="floors.displayContent.name">商品示例{{ CountIndex + 1 }}</span>
                                <!-- <span class="goods-spec-name" v-if="floors.displayContent.skuName">示例SKU</span> -->
                                <div class="pro-price" v-if="floors.displayContent.price" :style="{ color: themes.color }">
                                    <span class="price">
                                        ￥
                                        <em class="now" :style="{ color: themes.color }">999</em>
                                        .00
                                    </span>
                                </div>
                                <div class="goods-cat-image" v-if="floors.displayContent.cartStyle" :style="{ background: themes.color }">
                                    <img src="../../assets/images/goodCar.png" alt="" />
                                </div>
                            </div>
                        </li>
                    </template>
                </template>
                <!-- 自定义 -->

                <template v-else>
                    <template v-if="shopData && shopData.length">
                        <li
                            class="goods-li"
                            :class="floors.prodStyle == 'style1' ? 'radius' : ''"
                            v-for="(prodItem, CountIndex) in shopData"
                            :key="CountIndex"
                            @click="goingGoods(prodItem)"
                        >
                            <div class="goods-li-item">
                                <div class="item-img">
                                    <legend-image :pic="prodItem.pic" :isJD="prodItem.prodSource == 'JD'" className="object-contain" :options="{w:'174',h:'170'}" />
                                </div>
                                <div class="goods-horn" v-if="floors.displayContent.badgeStyle">
                                    <template v-if="floors.displayContent.badge == 'new'">
                                        <img src="../../assets/images/horn1.png" alt="" />
                                    </template>
                                    <template v-if="floors.displayContent.badge == 'hot'">
                                        <img src="../../assets/images/horn2.png" alt="" />
                                    </template>
                                    <template v-if="floors.displayContent.badge == 'custom'">
                                        <img
                                            :src="
                                                floors.displayContent.url
                                                    ? $imgUrlHead + floors.displayContent.url
                                                    : require('../../assets/images/detailDefault.jpg')
                                            "
                                            alt=""
                                        />
                                    </template>
                                </div>
																<goods-img-mask v-if="prodItem.status === -1 || prodItem.status === 0 || prodItem.invalidStatus === 10" :info="prodItem"></goods-img-mask>
                            </div>

                            <div
                                class="item-content _paddingTB"
                                v-if="floors.displayContent"
                                :class="[
                                    !floors.displayContent.name && !floors.displayContent.skuName && !floors.displayContent.price ? 'on' : '',
                                    floors.displayContent.price == false ? 'on1' : ''
                                ]"
                            >
                                <span class="goods-name" v-if="floors.displayContent.name">{{ prodItem.name }}</span>
                                <!-- <span class="goods-spec-name"  v-if="floors.displayContent.skuName">{{ prodItem.skuName }}</span> -->
                                <div class="pro-price" v-if="floors.displayContent.price" :style="{ color: themes.color }">
                                    <span class="price">
                                        ￥
                                        <em class="now" :style="{ color: themes.color }">{{ Money(prodItem.price)[0] }}</em>
                                        .{{ Money(prodItem.price)[1] }}
                                    </span>
                                </div>
                                <div class="goods-cat-image" v-if="floors.displayContent.cartStyle" :style="{ background: themes.color }">
                                    <img src="../../assets/images/goodCar.png" alt="" />
                                </div>
                            </div>
                        </li>
                    </template>

                    <template v-else>
                        <li
                            class="goods-li"
                            :class="floors.prodStyle == 'style1' ? 'radius' : ''"
                            v-for="(prodItem, CountIndex) in floors.prodCount"
                            :key="CountIndex"
                        >
                            <div class="goods-li-item">
                                <div class="item-img"><img src="../../assets/images/moren.png" alt="" /></div>
                                <div class="goods-horn" v-if="floors.displayContent.badgeStyle">
                                    <template v-if="floors.displayContent.badge == 'new'">
                                        <img src="../../assets/images/horn1.png" alt="" />
                                    </template>
                                    <template v-if="floors.displayContent.badge == 'hot'">
                                        <img src="../../assets/images/horn2.png" alt="" />
                                    </template>
                                    <template v-if="floors.displayContent.badge == 'custom'">
                                        <img
                                            :src="
                                                floors.displayContent.url
                                                    ? $imgUrlHead + floors.displayContent.url
                                                    : require('../../assets/images/detailDefault.jpg')
                                            "
                                            alt=""
                                        />
                                    </template>
                                </div>
                            </div>
                            <div
                                class="item-content _paddingTB"
                                v-if="floors.displayContent"
                                :class="[
                                    !floors.displayContent.name && !floors.displayContent.skuName && !floors.displayContent.price ? 'on' : '',
                                    floors.displayContent.price == false ? 'on1' : ''
                                ]"
                            >
                                <span class="goods-name" v-if="floors.displayContent.spuName">
                                    <template v-if="floors.prodSource.type == 'category'">分类商品示例{{ CountIndex + 1 }}</template>
                                    <template v-if="floors.prodSource.type == 'group'">分组商品示例{{ CountIndex + 1 }}</template>
                                </span>
                                <!-- <span class="goods-spec-name" v-if="floors.displayContent.skuName">示例SKU</span> -->
                                <div class="pro-price" v-if="floors.displayContent.price" :style="{ color: themes.color }">
                                    <span class="price">
                                        ￥
                                        <em class="now" :style="{ color: themes.color }">999</em>
                                        .00
                                    </span>
                                </div>
                                <div class="goods-cat-image" v-if="floors.displayContent.cartStyle" :style="{ background: themes.color }">
                                    <img src="../../assets/images/goodCar.png" alt="" />
                                </div>
                            </div>
                        </li>
                    </template>
                </template>
            </ul>
        </div>
        <!-- 小图两列 -->

        <!-- 详细列表 -->
        <div class="goods-list-3" v-if="floors.listStyle == 'style2'" :style="{ background: floors.background }">
            <ul class="goods-list-3-ul" ref="goodsLi">
                <template v-if="floors.prodSource.type == 'diy'">
                    <template v-if="shopData && shopData.length">
                        <li
                            class="goods-li"
                            :class="floors.prodStyle == 'style1' ? 'radius' : ''"
                            v-for="(prodItem, CountIndex) in shopData"
                            :key="CountIndex"
                            @click="goingGoods(prodItem)"
                        >
                            <div class="item-pord">
																<div class="position-relative overflow-h" :style="{borderRadius: floors.prodStyle == 'style1' ? '5px' : ''}">
																	<div class="item-img">
																	    <legend-image :pic="prodItem.pic" :isJD="prodItem.prodSource == 'JD'" className="object-contain" :options="{w:'120',h:'120'}"  />
																	</div>
																	<div class="goods-horn" v-if="floors.displayContent.badgeStyle">
																	    <template v-if="floors.displayContent.badge == 'new'">
																	        <img src="../../assets/images/horn1.png" alt="" />
																	    </template>
																	    <template v-if="floors.displayContent.badge == 'hot'">
																	        <img src="../../assets/images/horn2.png" alt="" />
																	    </template>
																	    <template v-if="floors.displayContent.badge == 'custom'">
																	        <img
																	            style="border-radius: 5px"
																	            :src="
																	                floors.displayContent.url
																	                    ? $imgUrlHead + floors.displayContent.url
																	                    : require('../../assets/images/detailDefault.jpg')
																	            "
																	            alt=""
																	        />
																	    </template>
																			
																	</div>
																	<goods-img-mask v-if="prodItem.status === -1 || prodItem.status === 0 || prodItem.invalidStatus === 10" :info="prodItem"></goods-img-mask>
																</div>
                                <div class="item-content">
                                    <span class="goods-name">{{ prodItem.name }}</span>
                                    <!-- <span
                    class="goods-spec-name"
                    v-if="floors.displayContent.skuName"
                    >{{ prodItem.skuName }}</span
                  > -->
                                    <div style="display: flex; align-items: center; margin-top: auto">
                                        <div class="pro-price" v-if="floors.displayContent.price" :style="{ color: themes.color }">
                                            <span class="price">
                                                ￥
                                                <em class="now" :style="{ color: themes.color }">{{ Money(prodItem.price)[0] }}</em>
                                                .{{ Money(prodItem.price)[1] }}
                                            </span>
                                        </div>
                                        <div class="goods-cat-image" v-if="floors.displayContent.cartStyle" :style="{ background: themes.color }">
                                            <img src="../../assets/images/goodCar.png" alt="" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </template>

                    <template v-else>
                        <li
                            class="goods-li"
                            :class="floors.prodStyle == 'style1' ? 'radius' : ''"
                            v-for="(prodItem, CountIndex) in floors.prodCount"
                            :key="CountIndex"
                        >
                            <div class="item-pord">
                                <div class="item-img"><img src="../../assets/images/moren.png" alt="" /></div>
                                <div class="goods-horn" v-if="floors.displayContent.badgeStyle">
                                    <template v-if="floors.displayContent.badge == 'new'">
                                        <img src="../../assets/images/horn1.png" alt="" />
                                    </template>
                                    <template v-if="floors.displayContent.badge == 'hot'">
                                        <img src="../../assets/images/horn2.png" alt="" />
                                    </template>
                                    <template v-if="floors.displayContent.badge == 'custom'">
                                        <img
                                            :src="
                                                floors.displayContent.url
                                                    ? $imgUrlHead + floors.displayContent.url
                                                    : require('../../assets/images/detailDefault.jpg')
                                            "
                                            alt=""
                                        />
                                    </template>
                                </div>
                                <div class="item-content">
                                    <span class="goods-name" v-if="floors.displayContent.name">商品示例{{ CountIndex + 1 }}</span>
                                    <!-- <span class="goods-spec-name" v-if="floors.displayContent.skuName">示例SKU</span> -->
                                    <div style="display: flex; align-items: center; margin-top: auto">
                                        <div class="pro-price" v-if="floors.displayContent.price" :style="{ color: themes.color }">
                                            <span class="price">
                                                ￥
                                                <em class="now" :style="{ color: themes.color }">999</em>
                                                .00
                                            </span>
                                        </div>
                                        <div class="goods-cat-image" v-if="floors.displayContent.cartStyle" :style="{ background: themes.color }">
                                            <img src="../../assets/images/goodCar.png" alt="" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </template>
                </template>

                <template v-else>
                    <template v-if="shopData && shopData.length">
                        <li
                            class="goods-li"
                            :class="floors.prodStyle == 'style1' ? 'radius' : ''"
                            v-for="(prodItem, CountIndex) in shopData"
                            :key="CountIndex"
                            @click="goingGoods(prodItem)"
                        >
                            <div class="item-pord">
															<div class="position-relative overflow-h" :style="{borderRadius: floors.prodStyle == 'style1' ? '5px' : ''}">
																<div class="item-img">
																    <legend-image :pic="prodItem.pic" :isJD="prodItem.prodSource == 'JD'" :options="{w:'120',h:'120'}"  />
																</div>
																<div class="goods-horn" v-if="floors.displayContent.badgeStyle">
																    <template v-if="floors.displayContent.badge == 'new'">
																        <img src="../../assets/images/horn1.png" alt="" />
																    </template>
																    <template v-if="floors.displayContent.badge == 'hot'">
																        <img src="../../assets/images/horn2.png" alt="" />
																    </template>
																    <template v-if="floors.displayContent.badge == 'custom'">
																        <img
																            :src="
																                floors.displayContent.url
																                    ? $imgUrlHead + floors.displayContent.url
																                    : require('../../assets/images/detailDefault.jpg')
																            "
																            alt=""
																        />
																    </template>
																</div>
																<goods-img-mask v-if="prodItem.status === -1 || prodItem.status === 0 || prodItem.invalidStatus === 10" :info="prodItem"></goods-img-mask>
															</div>
                               
                                <div class="item-content">
                                    <span class="goods-name">{{ prodItem.name }}</span>
                                    <!-- <span
                    class="goods-spec-name"
                    v-if="floors.displayContent.skuName"
                    >{{ prodItem.skuName }}</span
                  > -->
                                    <div style="display: flex; align-items: center; margin-top: auto">
                                        <div class="pro-price" v-if="floors.displayContent.price" :style="{ color: themes.color }">
                                            <span class="price">
                                                ￥
                                                <em class="now" :style="{ color: themes.color }">{{ Money(prodItem.price)[0] }}</em>
                                                .{{ Money(prodItem.price)[1] }}
                                            </span>
                                        </div>
                                        <div class="goods-cat-image" v-if="floors.displayContent.cartStyle" :style="{ background: themes.color }">
                                            <img src="../../assets/images/goodCar.png" alt="" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </template>

                    <template v-else>
                        <li
                            class="goods-li"
                            :class="floors.prodStyle == 'style1' ? 'radius' : ''"
                            v-for="(prodItem, CountIndex) in floors.prodCount"
                            :key="CountIndex"
                        >
                            <div class="item-pord">
                                <div class="item-img"><img src="../../assets/images/moren.png" alt="" /></div>
                                <div class="goods-horn" v-if="floors.displayContent.badgeStyle">
                                    <template v-if="floors.displayContent.badge == 'new'">
                                        <img src="../../assets/images/horn1.png" alt="" />
                                    </template>
                                    <template v-if="floors.displayContent.badge == 'hot'">
                                        <img src="../../assets/images/horn2.png" alt="" />
                                    </template>
                                    <template v-if="floors.displayContent.badge == 'custom'">
                                        <img
                                            :src="
                                                floors.displayContent.url
                                                    ? $imgUrlHead + floors.displayContent.url
                                                    : require('../../assets/images/detailDefault.jpg')
                                            "
                                            alt=""
                                        />
                                    </template>
                                </div>
                                <div class="item-content">
                                    <span class="goods-name" v-if="floors.displayContent.name">
                                        <template v-if="floors.prodSource.type == 'category'">分类商品示例{{ CountIndex + 1 }}</template>
                                        <template v-if="floors.prodSource.type == 'group'">分组商品示例{{ CountIndex + 1 }}</template>
                                    </span>
                                    <!-- <span class="goods-spec-name" v-if="floors.displayContent.skuName">示例SKU</span> -->
                                    <div style="display: flex; align-items: center; margin-top: auto">
                                        <div class="pro-price" v-if="floors.displayContent.price" :style="{ color: themes.color }">
                                            <span class="price">
                                                ￥
                                                <em class="now" :style="{ color: themes.color }">999</em>
                                                .00
                                            </span>
                                        </div>
                                        <div class="goods-cat-image" v-if="floors.displayContent.cartStyle" :style="{ background: themes.color }">
                                            <img src="../../assets/images/goodCar.png" alt="" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </template>
                </template>
            </ul>
        </div>
        <!-- 详细列表 -->
    </div>
</template>

<script>
import { mapState } from 'vuex'
import cash from 'utils/tool'
import legendImage from 'components/legendImage/legendImage'
import goodsImgMask from './goodsImgMask'
import { shopCategoryProd, groupProd, manuallySelectProducts } from 'api/index'
import jumpMixin from 'mixin/jumpMixin.js'
export default {
    components: {
        legendImage,
				goodsImgMask
    },
    props: {
        floors: Object,
        scrollTop: {
            type: [Number, String]
        }
    },
    mixins: [jumpMixin],
    data() {
        return {
            Money: cash, //价格转换
            windowHeight: 0, //可视区的高
            rangeTop: 0, //距离顶部
            loadState: false, //是否加载过
            shopData: []
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    watch: {
        floors: {
            handler(val) {
                if (val.prodSource.type == 'diy') {
                    this.shopData = val.prodSource.prods
                } else {
                    if (this.loadState) {
                        this.loadState = false
                        this.reFresh()
                    }
                }
            },
            immediate: true
        },
        scrollTop(val) {
            if (!this.loadState && this.rangeTop <= this.windowHeight + val - 20) {
                this.loadData()
            }
        }
    },
    mounted() {
        this.reFresh()
    },
    methods: {
        reFresh() {
            //获取可视区的高
            this.windowHeight = document.documentElement.clientHeight

            let top = this.$refs['goodsLi'].getBoundingClientRect().top

            this.rangeTop = top
            if (top <= this.windowHeight) {
                this.loadData();
            }
        },

        //类型懒加载，针对商品类型的特效情况
        loadData() {
            let that = this
            this.loadState = true
            if (that.floors.prodSource.type == 'diy') {
				/*
				 * 获取手动选择商品信息。原因：首页装修，商品价格更新问题；手动增加的商品编辑后不能同步价格
				 * 做法：前端解析整个装修JSON数据 筛选出对应楼层标识的手动装修的商品ID集合，请求后端接口计算折扣价，后端返回对应楼层标识，以及对应商品信息，再重新渲染商品信息。
				 * status = -1  删除    status =  0  下架   invalidStatus = 10 失效
				 * invalidStatus 优先级比 status高
				 */
				let prames = {
					prodIds: this.floors.prodSource.prods.map(val => val.prodId)
				}
				manuallySelectProducts(prames).then(res => {
					if (res.status == 1) {
						if(Array.isArray(res.result.prodList)) {
							res.result.prodList.forEach((val) => {
								let itemIndex = this.shopData.findIndex(valItem => {
									return val.prodId === valItem.prodId
								})
								this.shopData[itemIndex] = Object.assign(this.shopData[itemIndex],{
									invalidStatus :val.invalidStatus || '',	
									status : val.status,
									prodSource : val.prodSource || '',
									prodId : val.prodId,
									name : val.name || this.shopData[itemIndex].name,
									pic : val.pic || this.shopData[itemIndex].pic,
									price : val.price || this.shopData[itemIndex].price
								})
								
							})
						}
					    this.$forceUpdate()
					} else {
					    this.shopData = []
					}
				})
            } else if (that.floors.prodSource.type == 'category') {
                let prames = {
                    shopCategoryId: that.floors.action.category.id,
                    pageCount: that.floors.prodCount,
                    grade: that.floors.action.category.grade
                }

                shopCategoryProd(prames).then((res) => {
                    if (res.status == 1) {
                        this.shopData = res.result
                        this.$forceUpdate()
                    } else {
                        this.shopData = []
                    }
                })
            } else {
                let prames = {
                    prodGroupId: this.floors.action.prodGroup.id,
                    pageCount: this.floors.prodCount
                }

                groupProd(prames).then((res) => {
                    if (res.status == 1) {
                        this.shopData = res.result
                    } else {
                        this.shopData = []
                    }
                })
            }
        },

        goingGoods(prodItem) {
			if(prodItem.status === -1 || prodItem.status === 0 || prodItem.invalidStatus === 10) {
				return false
			}
			this.$router.push({
			    path: `/goodsDetail`,
			    query: {
			        goodsInfoId: prodItem.prodId
			    }
			})			
					
            
        }
    }
}
</script>
<style scoped>
/* 商品列表 */

.goods-list-2 {
    background: rgb(247, 247, 247);
    /* padding: 10px 0px; */
    width: 100%;
    float: left;
}

.goods-list-2 .goods-list-2-ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 2.3%;
    /* justify-content: start; */
}
.goods-list-2 .goods-list-2-ul .goods-li {
    margin-bottom: 0.2rem;
    overflow: hidden;
    /* float: left; */
    background: #fff;
    position: relative;
    /* margin-left: 0.24rem; */
    flex-basis: 48.5%;
}

.goods-list-2 .goods-list-2-ul .goods-li:nth-child(odd) {
    margin-right: 1.15%;
}
.goods-list-2 .goods-list-2-ul .goods-li:nth-child(even) {
    margin-left: 1.15%;
}

.goods-list-2 .goods-list-2-ul .goods-li.radius {
    border-radius: 5px;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}
.goods-list-2 .goods-list-2-ul .goods-li .goods-li-item {
    overflow: hidden;
    width: 100%;
    background: #fff;
    position: relative;
}
.goods-list-2 .goods-list-2-ul .goods-li .goods-li-item .item-img {
    width: 100%;
    height: 3.4rem;
    overflow: hidden;
}
.goods-list-2 .goods-list-2-ul .goods-li .goods-li-item .goods-horn,
.goods-list-3 .goods-li .goods-horn {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
}
.item-img img {
    border-right: 5px;
}

.goods-list-2 .goods-list-2-ul .goods-li .goods-li-item .item-img img,
.goods-list-3 .goods-li .item-img img,
.goods-list-2 .goods-list-2-ul .goods-li .goods-li-item .goods-horn img,
.goods-list-3 .goods-li .goods-horn img {
    width: 100%;
    height: 100%;
    display: inline-block;
}
.goods-list-2 .goods-list-2-ul .goods-li .item-content {
    font-size: 0;
    float: left;
}
.goods-list-2 .goods-list-2-ul ._paddingTB {
    padding: 5px 0;
}
.goods-list-2 .goods-list-2-ul ._paddingTB.on {
    padding: 20px 0;
}

.goods-list-2 .goods-list-2-ul ._paddingTB.on1 {
    padding: 5px 0 30px 0;
}

.goods-list-2 .goods-list-2-ul .goods-li .item-content .goods-name {
    width: 3.4rem;
    margin-top: 5px;
    padding: 0 5px;
    font-size: 13px;
    line-height: 18px;
    height: 36px;
    background: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    font-family: -apple-system, Helvetica, sans-serif;
}
.goods-list-2 .goods-list-2-ul .goods-li .item-content .goods-spec-name {
    color: #999;
    font-size: 12px;
    padding-left: 15px;
    white-space: nowrap;
    display: inline-block;
    height: 12px;
}
.goods-list-2 .goods-list-2-ul .goods-li .item-content .pro-price {
    display: block;
    margin: 16px 10px 0;
    background: #fff;
    line-height: 16px;
    padding-bottom: 5px;
    font-size: 12px;
    color: #f23030;
}
.goods-list-2 .goods-list-2-ul .goods-li .item-content .pro-price .price {
    height: 16px;
    overflow: hidden;
}
.goods-list-2 .goods-list-2-ul .goods-li .item-content .pro-price .price .now {
    font-size: 16px;
    color: #f23030;
}
.goods-list-2 .goods-list-2-ul .goods-li .item-content .goods-cat-image {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
}
.goods-list-2 .goods-list-2-ul .goods-li ._paddingTB.on .goods-cat-image {
    right: 47% !important;
    bottom: 0.15rem !important;
}

.goods-list-2 .goods-list-2-ul .goods-li .item-content .goods-cat-image img {
    width: 100%;
    height: 100%;
}

.goods-list-3 {
    background: rgb(247, 247, 247);
    /* padding: 10px 0px; */
    width: 100%;
    float: left;
}
.goods-list-3 .goods-li {
    /* height: 2rem; */
    margin: 0 12.5px;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 10px;
    background: #fff;
    position: relative;
}
.goods-list-3 .goods-li.radius {
    border-radius: 5px;
}
.goods-list-3 .goods-li .item-img {
    width: 2.4rem;
    height: 2.4rem;
    overflow: hidden;
    border-right: 5px;
    /* float: left; */
}

.goods-list-3 .goods-li .item-content {
    font-size: 0px;
    background: #fff;
    padding: 0 15px;
    flex: 1;
    display: flex;
    flex-flow: column;
    width: 100%;
}

.goods-list-3 .goods-li .item-content .goods-name {
    /* width: 235px; */
    font-size: 13px;
    line-height: 0.4rem;
    height: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    font-family: -apple-system, Helvetica, sans-serif;
}
.goods-list-3 .goods-li .item-content .goods-spec-name {
    display: inline-block;
    color: #999;
    font-size: 12px;
    padding-left: 15px;
    margin-top: 5px;
}

.goods-list-3 .goods-li .item-content .pro-price {
    width: 100px;
    height: 25px;
    line-height: 25px;
    color: #f23030;
    font-size: 12px;
    text-align: left;
    /* padding: 0 50px 0 15px; */
    overflow: hidden;
}
.goods-list-3 .goods-li .item-content .pro-price .now {
    font-size: 16px;
}
.goods-list-3 .goods-li .item-content .goods-cat-image {
    /* position: absolute; */
    /* right: 0.2rem; */
    width: 20px;
    height: 20px;
    /* top: 1.4rem; */
    border-radius: 50%;
    overflow: hidden;
    margin-left: auto;
}
.goods-list-3 .goods-li .item-content .goods-cat-image img {
    width: 100%;
    height: 100%;
}

.item-pord {
    position: relative;
    width: 100%;
    display: flex;
    overflow: hidden;
}

/* 商品列表 end */
</style>
